<template>
  <div class="divout" v-if=vis>
    <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        ref="slideblock"
        @again="onAgain"
        @fulfilled="onFulfilled"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
        :accuracy="accuracy"
        :imgs="imgs"
    ></slide-verify>
  </div>
</template>

<script>
export default {
  name:"verify",
  props:['vis'],
  data() {
    return {
      status:false,
      text: "向右滑动->",
      accuracy: 2,
      imgs: [
        "https://img1.baidu.com/it/u=1890390320,3399874998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
      ],
    };
  },
  methods: {
    // 验证通过
    onSuccess(times) {
      setTimeout(() => {
        this.vis = false;
        this.status=true;
        this.$emit('status-changed', this.status);
        this.$emit('update_isPopupVisible', this.vis);
      }, 500);
      this.$emit('register-event');
    },
    onFail() {
      setTimeout(() => {
        this.vis = false;
        this.status=false;
        this.$emit('status-changed', this.status);
        this.$emit('update_isPopupVisible', this.vis);
      }, 500);
      alert("验证失败!");
    },
    // 滑块上的刷新
    onRefresh() {
      console.log("点击了刷新小图标");
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      this.$refs.slideblock.reset();
    },
  },
};
</script>
<style scoped>
.divout {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  z-index: 9999;
}
</style>-->
